<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>校区管理</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/zTree/css/zTreeStyle/zTreeStyle.css"/>

</head>

<body>
<% include("../layout/loading.html"){} %>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">校区名称：</label>
                        <div class="layui-input-inline mr0">
                            <input id="edtSearch" class="layui-input" type="text" placeholder="校区名称"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查询</button>
                        <button id="btnReset" class="layui-btn icon-btn"><i class="layui-icon">&#xe669;</i>重置</button>
                        <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
                    </div>
                </div>
            </div>

            <table class="layui-table" id="schoolTable" lay-filter="schoolTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="modelSchool">
    <form id="modelSchoolForm" lay-filter="modelSchoolForm" class="layui-form model-form" style="margin-left: 20px;height: 400px;width: 250px">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">校区名称</label>
            <div class="layui-input-block">
                <input name="schoolName" placeholder="请输入" type="text" class="layui-input" style="width: 200px"
                       lay-verType="tips" lay-verify="required" required/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属机构</label>
            <div class="layui-input-block" style="width: 200px">
                <select name="organizationId" lay-verify="required">
                    <option value="">请选择</option>
                    <% for(organization in organizationList) { %>
                    <option value="${organization.id}">${organization.organizationName}</option>
                    <% } %>
                </select>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
            <button class="layui-btn" lay-filter="schoolSubmit" lay-submit>保存</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/libs/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;

        // 渲染表格
        var insTb = table.render({
            elem: '#schoolTable',
            url: '/admin/school/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'numbers'},
                {field: 'schoolName', title: '校区名称'},
                {field: 'organizationName', title: '所属机构'},
                {field: 'classNum', title: '班级数'},
                {field: 'schoolAdminName', title: '校区负责人'},
                {align: 'center', toolbar: '#tableBar', title: '操作', minWidth: 200}
            ]]
        });

        // 添加
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 查询
        $('#btnSearch').click(function () {
            insTb.reload({where: {keyword: $('#edtSearch').val()}});
        });
        // 重置
        $('#btnReset').click(function () {
            $('#edtSearch').val("");
            window.location.reload();
        });

        // 工具条点击事件
        table.on('tool(schoolTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            } else if (layEvent === 'del') { // 删除
                doDel(obj);
            }
        });

        // 删除
        function doDel(obj) {
            top.layer.confirm('确定要删除“' + obj.data.schoolName + '”校区吗？', {
                skin: 'layui-layer-admin'
            }, function (i) {
                top.layer.close(i);
                layer.load(2);
                $.post('/admin/school/delete', {
                    schoolId: obj.data.id
                }, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'json');
            });
        }

        // 显示编辑弹窗
        function showEditModel(mRole) {
            admin.open({
                type: 1,
                title: (mRole ? '修改' : '添加') + '校区',
                content: $('#modelSchool').html(),
                success: function (layero, dIndex) {
                    var url = mRole ? '/admin/school/update' : '/admin/school/add';
                    console.log(mRole);
                    form.val('modelSchoolForm', mRole);  // 回显数据
                    // 表单提交事件
                    form.on('submit(schoolSubmit)', function (data) {
                        console.log(data.field);
                        layer.load(2);
                        $.post(url, data.field, function (res) {

                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.close(dIndex);
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });
                }
            });
        }

    });
</script>
</body>
</html>